import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { ProductCard, Stepper, SwipeCell, Button, SubmitBar, Checkbox } from 'react-vant'
import './style.scss'

const Index = () => {
  const dispatch = useDispatch()
  // 获取仓库的数据 cart
  const cart = useSelector(state => state.cart)
  // 数量递增函数
  const onPlus = (id) => {
    dispatch({ type: 'addCount', payload: id })
  }
  const onMinus = (id) => {
    dispatch({ type: 'subCount', payload: id })
  }
  const onChange = (id) => {
    dispatch({ type: 'checkChange', payload: id })
  }
  return (
    <div>
      <div className="cart-list">
        {
          cart.map(v => {
            return <SwipeCell key={v.id} rightAction={
              <Button type="danger" style={{ height: '100%' }}>删除</Button>
            }>
              <div className="cart-item">
                <Checkbox className='check' checked={v.check} onChange={() => onChange(v.id)}></Checkbox>
                <ProductCard
                  num={
                    <Stepper min={1} value={v.count} onPlus={() => onPlus(v.id)} onMinus={() => onMinus(v.id)}></Stepper>
                  }
                  price={v.price.toFixed(2)}
                  title={v.title}
                  thumb={v.image}
                />
              </div>
            </SwipeCell>
          })
        }
      </div>
      <SubmitBar
        price="3050"
        buttonText="提交订单"
      >
        <Checkbox>全选</Checkbox>
      </SubmitBar>
    </div>
  )
}

export default Index

